<template>
  <div class="admin  grid md:grid-cols-[auto_1fr] h-screen w-screen ">
  
      <!-- 菜单 -->
     <meunComponent />
 

   <!-- 主页内容 -->
      <div class="content  bg-gray-200  grid grid-rows-[auto_1fr]">
       <div>
           <navbarComponent/>
          <historyComponent />
          
       </div>
          <!-- 内容主体 -->
        <div class=" bg-white  m-3 rounded-md relative overflow-y-auto">
           <router-view #default="{Component,route}">
         <Transition  mode="out-in"
 class="animate__animated"
         :enter-active-class=" route.meta.enterClass?? 'animate__fadeInRight'"
         :leave-active-class="route.meta.leaveClass?? 'animate__fadeOutLeft'"
           >
             <component :is="Component" class="absolute w-full  "/>
         </Transition>
           </router-view>
        </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import meunComponent from "./admin/menu.vue"
import  navbarComponent from "./admin/navbar.vue"
import historyComponent from "./admin/historyLink.vue"
 import menus from "@/store/menuStore"
 import {useRoute}  from "vue-router"
import { watch,onMounted } from "vue"
import utils from "@/utils"
import { CacheEnum } from "@/enum/userEnum"
import router from "@/router/index"
 const menu =menus();
 const route =useRoute()
 menu.init()

 watch(route, ()=>{
 
  menu.addHistoryMenu(route) //历史菜单(传入路由，每次点击菜单每一个加入到store当中)
  
},{ immediate: true })





</script>


<style lang="scss" scoped>
.animate__fadeInRight{
  animation-duration:0.3s;
}

.animate__fadeOutLeft{
 animation-duration:0.2s;
}
</style>>
